<template>
	<view class="siteAdd">
		<uni-section title="编辑钓场信息" type="line">
			<view class="example">
				<uni-forms ref="addForm" :modelValue="siteAddData" :rules="siteAddRules">
					<uni-forms-item class="maxlabel" required name="fish_place_name" label="钓场名称:">
						<uni-easyinput v-model="siteAddData.fish_place_name" placeholder="请输入钓场名称" />
					</uni-forms-item>
					<uni-forms-item class="maxlabel" required name="fish_place_slots_num" label="钓场数:">
						<uni-easyinput v-model="siteAddData.fish_place_slots_num" placeholder="请输入钓场数" />
					</uni-forms-item>
					<uni-forms-item class="maxlabel" required label="钓位示意图:">
						<uni-file-picker ref="files" v-model="this.pictures.fish_place_position_path"
							fileMediatype="image" mode="grid" :limit="1" title="最多选择1张图片" @select="select_position_path"
							@delete="del_position_path" @progress="progress" @success="success" @fail="fail"
							:auto-upload="false">
						</uni-file-picker>
					</uni-forms-item>
					<uni-forms-item class="maxlabel" required label="钓场封面图:">
						<uni-file-picker ref="files" v-model="this.pictures.fish_place_cover_path" fileMediatype="image"
							mode="grid" :limit="1" title="最多选择1张图片" @select="select_cover_path" @delete="del_cover_path"
							@progress="progress" @success="success" @fail="fail" :auto-upload="false">
						</uni-file-picker>
					</uni-forms-item>
					<uni-forms-item class="maxlabel" required label="钓场景观图:">
						<uni-file-picker ref="files" v-model="this.pictures.fish_place_landscape_path"
							fileMediatype="image" mode="grid" :limit="8" title="最多选择8张图片" @select="select" @delete="del"
							@progress="progress" @success="success" @fail="fail" :auto-upload="false">
						</uni-file-picker>
					</uni-forms-item>
					<uni-forms-item required name="detail_address" label="地址:">
						<uni-easyinput v-show="siteAddData.detail_address" v-model="siteAddData.detail_address"
							placeholder="请选择地址" />
						<button v-show="!siteAddData.detail_address" class="mini-btn plan" style="margin-left: 0;"
							size="mini" plain="true" @click="choosePostion">选择地址</button>
					</uni-forms-item>
					<uni-forms-item class="maxlabel" required name="fish_place_people" label="联系人:">
						<uni-easyinput v-model="siteAddData.fish_place_people" placeholder="请输入联系人" />
					</uni-forms-item>
					<uni-forms-item class="maxlabel" required name="fish_place_mobile" label="联系电话:">
						<uni-easyinput v-model="siteAddData.fish_place_mobile" placeholder="请输入联系电话" />
					</uni-forms-item>
					<uni-forms-item required class="fulllabel" name="fish_place_label" max="8" label="标签：(最多选择8个):">
						<uni-data-checkbox v-model="siteAddData.fish_place_label" multiple
							:localdata="fish_place_labels" />
					</uni-forms-item>
					<uni-forms-item required name="description" label="钓场介绍:">
						<uni-easyinput type="textarea" v-model="siteAddData.description" placeholder="请输入钓场介绍" />
					</uni-forms-item>
					<button class="save" @click="submit('addForm')">保存</button>
				</uni-forms>
			</view>
		</uni-section>
	</view>
</template>
<script>
	import {
		get_fish_place_label,
		put_fish_place,
		get_fish_place_info,
		pictures
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				id: null,
				fish_place_labels: [],
				siteAddData: {
					fish_place_name: '',
					fish_place_people: '',
					fish_place_mobile: '',
					description: '',
					detail_address: '',
					latitude: null,
					longitude: null,
					fish_place_label: [],
					pictures: {
						fish_place_cover_path: [],
						fish_place_landscape_path: [],
						fish_place_position_path: [],
					},
					fish_place_slots_num: null
				},
				pictures: {
					fish_place_cover_path: [],
					fish_place_landscape_path: [],
					fish_place_position_path: [],
				},
				siteAddRules: {
					fish_place_name: {
						rules: [{
							required: true,
							errorMessage: '钓场名称不能为空'
						}]
					},
					fish_place_slots_num: {
						rules: [{
							required: true,
							errorMessage: '钓场数不能为空'
						}]
					},
					fish_place_people: {
						rules: [{
							required: true,
							errorMessage: '联系人不能为空'
						}]
					},
					fish_place_mobile: {
						rules: [{
							required: true,
							errorMessage: '联系电话不能为空'
						}]
					},
					detail_address: {
						rules: [{
							required: true,
							errorMessage: '请选择钓场地址'
						}]
					},
					latitude: {
						rules: [{
							required: true
						}]
					},
					latitude: {
						rules: [{
							required: true
						}]
					},
					description: {
						rules: [{
							required: true,
							errorMessage: '钓场介绍不能为空'
						}]
					},
					fish_place_label: {
						rules: [{
								required: true,
								errorMessage: '请选择钓场标签'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value.length > 8) {
										callback('最多选择8个标签')
									}
									return true
								}
							}
						]
					},
				},
				imageValue1: [],
				imageValue2: [],
				imageValue3: [],

			}
		},
		onLoad(query) {
			this.id = query.id
			console.log(this.id)
			this.get_fish_place_label()
			this.getInfo(this.id)
		},
		methods: {
			httpRequest(src) {
				let that = this
				return new Promise((resolve, reject) => {
					let xhr = new XMLHttpRequest()
					xhr.open('GET', src, true)
					xhr.responseType = 'blob'
					xhr.onload = function(e) {
						if (this.status == 200) {
							let myBlob = this.response
							let files = new window.File(
								[myBlob],
								'a.png', {
									type: myBlob.type
								}
							) // myBlob.type 自定义文件名
							console.log(files)

							resolve(files)
						} else {
							reject(false)
						}
					}
					xhr.send()
				})
			},
			getInfo(id) {
				console.log(id)
				get_fish_place_info(id).then(res => {
					this.siteAddData = res
					this.pictures.fish_place_cover_path = res.pictures.fish_place_cover_path ? res.pictures
						.fish_place_cover_path : []
					this.pictures.fish_place_landscape_path = res.pictures.fish_place_landscape_path ? res.pictures
						.fish_place_landscape_path : []
					this.pictures.fish_place_position_path = res.pictures.fish_place_position_path ? res.pictures
						.fish_place_position_path : []
				})
			},
			get_fish_place_label() {
				get_fish_place_label().then(res => {
					this.fish_place_labels = res.data
				})
			},
			goto(url) {
				uni.navigateTo({
					url: url + "?id=" + this.id
				})
			},
			choosePostion() {
				uni.chooseLocation({
					success: res => {
						console.log(res)
						this.siteAddData.detail_address = res.address
						this.siteAddData.latitude = res.latitude
						this.siteAddData.longitude = res.longitude
					}
				});

			},
			submit(ref) {
				this.siteAddData.pictures = this.pictures
				this.$refs[ref].validate().then(res => {
					console.log(122121);
					put_fish_place(this.siteAddData, this.siteAddData.id).then(res => {
						console.log(res)
						uni.showToast({
							title: '钓场设置成功',
							duration: 500
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tabBar/self/index'
							})
						}, 500)
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			// 获取上传状态
			upload() {
				this.$refs.files.upload()
			},
			select_position_path(e) {
				let filePath = e.tempFilePaths[0]
				uni.uploadFile({
					url: 'http://47.96.22.12:18125/pictures/',
					filePath,
					// name: 'temp',
					name: 'temp',
					formData: {
						'Fishplaceid': this.id,
					},
					success: (res) => {
						console.log(res)
						this.pictures.fish_place_position_path = [{
							url: JSON.parse(res.data).data.temp
						}]
						console.log(this.pictures)
					}
				})
			},
			del_position_path(e) {
				this.pictures.fish_place_position_path = []
			},
			select_cover_path(e) {
				let filePath = e.tempFilePaths[0]
				console.log(filePath)
				uni.uploadFile({
					url: 'http://47.96.22.12:18125/pictures/',
					filePath,
					name: 'temp',
					formData: {
						'Fishplaceid': this.id,
					},
					success: (res) => {
						console.log(res)
						this.pictures.fish_place_cover_path = [{
							url: JSON.parse(res.data).data.temp
						}]
						console.log(this.pictures)
					}
				})
			},
			del_cover_path(e) {
				this.pictures.fish_place_cover_path = []
			},

			dataURLtoFile(dataUrl, fileName) {
				var arr = dataUrl.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], fileName, {
					type: mime
				});
			},

			select(e) {
				let filePath = e.tempFilePaths
				filePath.forEach(item => {
					uni.uploadFile({
						url:'http://47.96.22.12:18125/pictures/',
						filePath: item,
						name: 'temp',
						formData: {
							'Fishplaceid': this.id,
						},
						success:(res)=>{
							this.pictures.fish_place_landscape_path.push({
								url: JSON.parse(res.data).data.temp
							})
							console.log(this.pictures)

						}
					})
				})
			},
			del(e) {
				console.log(e, this.pictures)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功', e)
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			delpath(name) {
				this.pictures[name] = null
			},
			del_fish_place_landscape_path(item, index) {
				console.log(item, index)
			}
		}
	}
</script>

<style scoped lang="scss">
	.siteAdd {
		padding: 20rpx 40rpx;

		.uni-forms-item {
			:deep(.uni-forms-item__content) {
				width: 100%;
				position: relative;

				.plan {
					position: absolute;
					left: 250rpx;
				}

				.picker_landscape_path {
					.uni-file-picker__container {
						width: 100%;
						height: 100%;
						display: block;
					}
				}

				.uni-file-picker {
					.file-picker__box-content.is-add {
						border-color: #e04d4d !important;

						.icon-add {
							background-color: #de7373;
						}
					}
				}

				.checkbox__inner {
					display: none;
				}

				.checklist-text {
					border: 1px solid #e6e6e6;
					border-radius: 10rpx;
					padding: 16rpx 20rpx;
					font-size: 24rpx !important;
				}

				.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text {
					color: #fff;
					background: #D43030;
				}

				.imageBox {
					width: 100%;

					.grid-item-box {
						flex: 1;
						position: relative;
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						flex-direction: column;
						align-items: center;
						justify-content: center;
						overflow: hidden;

						.image {
							width: 100px;
							height: 100px;
						}

						.uniui-clear {
							position: absolute;
							right: 0;
							top: 0;
						}
					}
				}
			}
		}

		.maxlabel {
			:deep(.uni-forms-item__label) {
				width: 200rpx !important;
			}
		}

		.fulllabel {
			display: block !important;

			:deep(.uni-forms-item__label) {
				width: 100% !important;
			}
		}
		:deep(uni-button.save){
			height: 68rpx;
			line-height: 68rpx;
			border-radius: 30rpx;
			background: #D43030 !important;
			width: 400rpx !important;
			color: #fff;
			font-size: 24rpx;
		}
	}
</style>